<template>
  <view class="main">
  <u-navbar title="计划异常预警详情" :title-bold="true" title-color="#000"></u-navbar>
  <searchcom @searchList="searchList" :customerStr="searchData.customerStr" :countyStr="searchData.countyStr" :countyNo="searchData.countyNo"></searchcom>

  <scroll-view
  :scroll-y="true"
  class="u-flex-1 of-hide"
  refresher-enabled="true"
  :refresher-triggered="triggered"
  :refresher-threshold="50"
  refresher-background="#F5F5F5"
  @refresherrefresh="onRefresh"
  @scrolltolower="onScrollToLower"
>
<view class="list" v-for="(item,index) in listData" :key="index">
  <view class="biaoti">{{ item. customerName}}</view>
  <u-line color="#e0e0e0" />
  <view class="list-main">
      <view class="">
          <view class=""> 区县年计划</view>
      </view>
      <view class=""><view class=""> 企业年计划</view></view>
  </view>
    <view class="card">
      <view>{{ item.parentDrillingDepth }}</view>
      <view>掘进进尺计划（米）</view>
      <view class="flex" >
          <u-icon name="error-circle-fill" color="#d29e08" v-if="!item.drillingDepthIsInconformity" @click="warginToast('1')"></u-icon>
          <view :class="{ 'mar': !item.drillingDepthIsInconformity}">{{ item.drillingDepth }}</view>
        </view>
    </view>
    <view class="card">
      <view>{{ item.parentCoalYield }}</view>
      <view>原煤计划（吨）</view>
      <view class="flex" >
          <u-icon name="error-circle-fill" color="#d29e08" v-if="!item.coalYieldIsInconformity"  @click="warginToast('2')"></u-icon>
          <view :class="{ 'mar': !item.coalYieldIsInconformity}">{{ item.coalYield }}</view>
        </view>
    </view>
    <view class="card">
      <view>{{ item.parentElectricityCoal }}</view>
      <view>电煤计划（吨）</view>
      <view>
        <view class="flex">
          <u-icon name="error-circle-fill" color="#d29e08" v-if="!item.electricityCoalIsInconformity" @click="warginToast('3')"></u-icon>
          <view :class="{ 'mar': !item.electricityCoalIsInconformity}">{{ item.electricityCoal }}</view>
        </view>
      </view>
    </view>
</view>
<template v-if="!showEmpty">
    <view class="c-empty p-absolute-center">
      <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
    </view>
  </template>
  <view class="p-t-10 p-b-10" v-else>
    <u-loadmore :status="status" />
  </view>
</scroll-view>

<u-toast ref="uToast" />
</view>
</template>

<script>
import searchcom from "./searchCommon.vue";
export default {
  components: { searchcom },
  data(){
      return{
          triggered:false,
          listData:[],
          searchData:{
        countyNo:'',
        customerNo:'',
        customerCode:'',
        pageNumber:1,
        pageSize:10,
        customerId:''
      },
      swiperCurrent:0,
      showEmpty:true,
      status:'loading',
      }
  },
  onLoad(options){
  if (getApp().globalData.userInfo.superviseLevel !== '40') {
    this.searchData.countyNo = getApp().globalData.userInfo.countyNo
  }
  let { customerStr,customerId,countyNo,countyStr} = JSON.parse(decodeURIComponent(options.item));
  this.searchData.customerStr=customerStr
  this.searchData.countyStr = countyStr
    this.searchData.customerCode= customerId
    this.searchData.countyNo =countyNo
  this.getList()
},
methods:{
 async getList(){
    let url ='/excavation/alarm/getPlanWarningList'
    const {customerCode,pageNumber,pageSize,countyNo} =this.searchData
     const res= await this.$get(`${url}?customerId=${customerCode}&&countyNo=${countyNo}&&pageNumber=${pageNumber}&&pageSize=${pageSize}`)
     if (res && res.body.content) {
      this.listData = this.searchData.pageNumber === 1 ? res.body.content : this.listData.concat(res.body.content)
      // 到底了
      if (res.body.content.length < this.searchData.pageSize) {
        this.status = 'nomore'
      }
      // 数据空
      if (this.searchData.pageNumber === 1 && this.listData && this.listData.length === 0) {
        this.showEmpty = false
      } else {
        this.showEmpty = true
      }
    }
  },
  warginToast(e){
    let title =''
      if(e=='1'){
        title='企业掘进进尺计划和上级年计划不符合'
      }else if(e=='2'){
         title='企业原煤计划和上级年计划不符合'
      }else{
        title='企业电煤计划和上级年计划不符合'
      }
    this.$refs.uToast.show({
      title,
      type: 'warning', 
    })
  },
  onRefresh() {
    if (this.Isfreshing) return
    this.Isfreshing = true
    if (!this.triggered) {
      // 保证刷新状态下，triggered为true
      this.triggered = true
      this.init()
      this.getList()
      setTimeout(() => {
        this.triggered = false // 触发onRestore，关闭刷新图标
        this.Isfreshing = false
      }, 1200)
    }
  },
  searchList(e){
    this.searchData = Object.assign( this.searchData , e);
    this.getList()
  },
  init() {
    this.searchData.pageNumber = 1
    this.status = 'loading'
    this.showEmpty = true
  },
  onScrollToLower() {
    if (this.status === 'loading') {
      this.searchData.pageNumber++
      this.getList()
    }
  },
}
}
</script>

<style lang="scss" scoped>

.list{
  background-color: #fff;
  margin: 32rpx;
  padding: 4rpx 40rpx;
.biaoti{
  font-size: 32rpx;
  margin: 10rpx 0;
}
  .list-main{
      background-color: #fff;
      margin: 20rpx 0 15rpx 6rpx;
      display: flex;
  justify-content: space-between;
  }
}
.card{
display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
  margin: 20rpx 0;
}
.mar{
margin-left: 20rpx;
color: #d29e08;
}
</style>